<template>
  <div class="header">
    <div class="container">
      <div class="one">
        <span class="name"><img
            src="../assets/new/微信图片_20210527212513.jpg"
            alt=""
            width="215px"
          /></span>
        <!-- <span style="color:#dddddd">|</span> -->
        <!-- <span class="gn">一站式手机电脑购买</span> -->
        <div class="search">
          <input
            type="text"
            placeholder=""
          />
          <span class="btn">搜索</span>
          <p>
            <span>618减111</span>
            <span>大牌风暴</span>
            <span>福临门</span>
            <span>好物1元</span>
            <span>华为手机</span>
          </p>
        </div>
      </div>
      <div class="two">
        <div class="scflnew">
          <div
            class="scfl"
            @click="changefl"
          >
            <span>商城分类</span>
            <img
              src="../assets/icon/fl1.png"
              alt=""
              width="20px"
            />
          </div>
          <div
            class="fldetail"
            v-show="isShowFl"
          >
            <ul v-if="res">
              <li
                v-for="(v, k) of res"
                :key="k"
              >
                <div
                  class="li"
                  @click="gofl(k, v.title)"
                >
                  <img
                    :src="v.img"
                    alt=""
                  />
                  <span>{{ v.title }}</span>
                  <span
                    v-if="v.details"
                    class="arrow"
                  >></span>
                </div>
                <div
                  v-if="v.details"
                  class="vde"
                >
                  <div
                    class="flex"
                    :style="{ width: width(v.details) }"
                  >
                    <div
                      v-for="(v1, k1) of v.details"
                      :key="k1"
                      class="veditem"
                      @click="godetail(k, k1)"
                    >
                      <img
                        :src="v1.img"
                        alt=""
                      />
                      <span>{{ v1.title }}</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <ul class="nav">
          <li
            :class="{ active: active == 0 }"
            @click="choose(0)"
          >首页</li>
          <!-- <li :class="{ active: active == 1 }" @click="choose(1)">会员资讯</li> -->
          <li
            :class="{ active: active == 2 }"
            @click="choose(2)"
          >移动端APP</li>
          <li
            :class="{ active: active == 3 }"
            @click="choose(3)"
          >商家入驻</li>
          <li
            :class="{ active: active == 4 }"
            @click="choose(4)"
          >登录/注册</li>
          <li
            :class="{ active: active == 5 }"
            @click="choose(5)"
          >购物车</li>
          <li class="title">
            <img
              src="//13439588.s61i.faiusr.com/4/AD0I5KS0BhAEGAAgt6a8xwUowIqUpQEwKDgU.png.webp"
              alt=""
            />
          </li>
        </ul>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted () {
    this.axios.get("json/headerfl.json").then((res) => {
      this.res = res.data.res;
    });
  },
  data () {
    return {
      res: null,
      isShowFl: 1,
      active: 0,
      router: ["/", "/huiyuan", "/ydapp", "/shangjia", "/login", "shopping"],
    };
  },
  methods: {
    width (arr) {
      return Math.ceil(arr.length / 6) * 200 + "px";
    },
    godetail (index, i) {
      this.$router.push("/details?index=" + index + "&i=" + i);
    },
    gofl (index, type) {
      this.$router.push("/fl?index=" + index + "&type=" + type);
    },
    changefl () {
      this.isShowFl = !this.isShowFl;
    },
    choose (i) {
      this.active = i;
      this.$router.push(this.router[i]);
    },
  },
};
</script>

<style lang="scss" scoped>
$js: rgb(255, 94, 0);
$bg: #333333;
.header {
  .one {
    margin-top: 32px;
    display: flex;
    align-items: center;
    .name {
      color: #222222;
      font-size: 32px;
      margin-right: 180px;
    }
    .gn {
      margin: 0 16px;
      color: $js;
    }
    .search {
      margin-left: 32px;
      input {
        width: 380px;
        height: 30px;
        border: 2px solid $js;
        padding-left: 4px;
        vertical-align: top;
      }
      .btn {
        width: 70px;
        height: 36px;
        display: inline-block;
        color: #fff;
        background-color: $js;
        line-height: 36px;
        text-align: center;
        letter-spacing: 6px;
      }
      p {
        padding: 6px 0;
        span {
          color: #666;
          font-size: 14px;
          padding: 0 6px;
        }
      }
    }
  }
  .two {
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    .scflnew {
      position: relative;
      color: #fff;
      .fldetail {
        z-index: 100;
        position: absolute;
        font-size: 14px;
        width: 215px;
        left: 0;
        top: 57px;
        background-color: #333333;
        li {
          &:hover {
            background-color: #1a1c1f;
          }
          & + li {
            border-top: 1px solid #4c4c4c;
          }
          .li {
            position: relative;
            padding: 19px 0 18px 32px;
            display: flex;
            align-items: center;
            &:hover + .vde {
              display: block;
            }
          }
          img {
            width: 16px;
            margin: 0 6px 0 0;
          }
          .arrow {
            position: absolute;
            top: 20px;
            right: 20px;
          }
          .vde {
            position: absolute;
            box-sizing: border-box;
            height: 434px;
            top: 0;
            left: 215px;
            color: #000;
            display: none;
            .flex {
              background-color: #fff;
              width: 400px;

              height: 434px;
              display: flex;
              flex-direction: column;
              flex-wrap: wrap;
            }
            img {
              width: 32px;
              margin: 0 2px 0 22px;
            }
            &:hover {
              display: block;
            }
            .veditem {
              width: 200px;
              height: 72px;
              line-height: 72px;
              color: #181818;
              &:hover {
                color: $js;
              }
            }
          }
        }
      }
    }
    .scfl {
      background-color: $bg;
      color: #f5f5f5;
      width: 215px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      img {
        padding-right: 16px;
      }
      span {
        padding-left: 16px;
        font-size: 16px;
      }
    }
    .nav {
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      position: relative;
      li {
        color: #2b2b2b;
        cursor: pointer;
        &.active {
          color: $js !important;
        }
        &:hover {
          color: $js;
        }
      }
      .title {
        position: absolute;
        left: 340px;
        top: -8px;
      }
    }
  }
}
</style>
